<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        html,
        body {
            margin: 0;
            padding: 0;
            /* 设置 html 和 body 高度为 100% */
            height: 100%;
            /* 新增：隐藏垂直滚动条 */
            overflow-y: hidden; 
            overflow-x: hidden;
        }

        body {
            background-image: url('2fc1778adc9adbdfa2f751beeb7d52f25dd7db4d.png');
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
        }

        canvas {
            display: block;
            width: 100%;
            height: 100%;
            position: absolute;
            z-index: -1;
        }

        /* 新增容器样式 */
        .overlay-container {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 1;
            /* 确保 z-index 大于 canvas 的 z-index */
        }

        /* 标题容器样式 */
        .title-container {
            text-align: center;
            margin-top: -5.5vh;
            /* 调整标题距离顶部的距离 */
        }

        /* 添加字体定义 */
       /* 在线链接服务仅供平台体验和调试使用，平台不承诺服务的稳定性，企业客户需下载字体包自行发布使用并做好备份。 */
/* 在线链接服务仅供平台体验和调试使用，平台不承诺服务的稳定性，企业客户需下载字体包自行发布使用并做好备份。 */
@font-face {
  font-family: "阿里妈妈刀隶体 Regular";font-weight: 400;src: url("//at.alicdn.com/wf/webfont/0JTFthbpcms1/KS7cgJhXoFey.woff2") format("woff2"),
  url("//at.alicdn.com/wf/webfont/0JTFthbpcms1/IZ6xAbzpB1jG.woff") format("woff");
  font-display: swap;
}

        .below-title-container {

            /* 半透明背景 */
            display: flex;
            justify-content: space-around;
            align-items: center;
            margin-left: 5%;
            margin-top: 10%;
            width: 90%;
            height: 20%;
        }
        .below-title-container2 {
            /* 半透明背景 */
            display: flex;
            justify-content: space-around;
            align-items: center;
            margin-left: 5%;
            margin-top: 2%;
            width: 90%;
            height: 50%;
        }
        .small-container {
            width: 19%;
            height: 100%;
            border-radius: 20px;
            position: relative; /* 添加相对定位，为伪元素定位做准备 */
        }

        /* 添加网格效果样式 */
        .small-container::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border-radius: 20px;
            background-image: linear-gradient(to right, rgba(255, 255, 255, 0.2) 1px, transparent 1px),
                              linear-gradient(to bottom, rgba(255, 255, 255, 0.2) 1px, transparent 1px);
            background-size: 2px 2px; /* 控制网格大小 */
            z-index: 1; /* 为伪元素设置 z-index */
        }
        .small-container-child {
            width: 60%;
            height: 75%;
            margin-top: -20%;
            margin-left: 20%;
            background-size: cover;  /* 新增，确保图片覆盖容器 */
            background-position: center;  /* 新增，确保图片居中 */
            background-repeat: no-repeat;  /* 新增，防止图片重复 */
            position: relative; /* 添加相对定位 */
            z-index: 2; /* 设置比伪元素更高的 z-index */
        }
         .small-container2 {
                display: flex;
                flex-direction: column;
            }
            .title-in-small2 {
                
                text-align: center;
                color: white;
                font-size: 6vh;
                padding: 10px;
                font-family: "阿里妈妈刀隶体 Regular", Arial, sans-serif; /* 修改字体 */
            }
            .image-in-small2 {
                flex: 1;
            }
        .small-container2 {

            width: 35%;
            height: 100%;

        }
        .small-container-child {
            width: 60%;
            height: 75%;
            margin-top: -20%;
            margin-left: 20%;
            background-size: cover;  /* 新增，确保图片覆盖容器 */
            background-position: center;  /* 新增，确保图片居中 */
            background-repeat: no-repeat;  /* 新增，防止图片重复 */
        }

        .title{
        
            text-align: center;
            color: white;
            font-family: "阿里妈妈刀隶体 Regular", Arial, sans-serif; /* 修改字体 */
            font-size: 6vh;
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100%;
            height: 20%; 
        }

        /* 定义不同背景图的类 */
        .child-img-1 {
            background-image: url('视频互联.png');
        }

        .child-img-2 {
               background-image: url('全明工程.png');
        }

        .child-img-3 {
              background-image: url('养老服务.png');
        }

        .child-img-4 {
               background-image: url('视频互联.png');
        }

        .child-img-5 {
             background-image: url('全明工程.png');
        }

        .gradient-orange {
            background: linear-gradient(45deg, #255796 30%, #3983A5 70%);
        }

        .gradient-green {
            background: linear-gradient(45deg, #2D7966 30%, #3881A4 70%);
        }

        .gradient-purple {
            background: linear-gradient(45deg, #B94156 30%, #FCCDA1 70%);
        }

        .gradient-red {
          background: linear-gradient(45deg, #255796 30%, #3983A5 70%);
        }

        .gradient-cyan {
           background: linear-gradient(45deg, #2D7966 30%, #3881A4 70%);
        }
        .text-container {
            margin-top: 10%;
            text-align: center;
            color: white;
            font-family: "阿里妈妈刀隶体 Regular", Arial, sans-serif; /* 修改字体 */
            font-size: 4vh;
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100%;
            height: 20%; 
        }
    </style>
    <!-- 引入新创建的 CSS 文件 -->
    <!-- 引入 jQuery 库 -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <link rel="stylesheet" href="animation.css">
    <link rel="stylesheet" href="botton.css">
    <link rel="stylesheet" href="new-container.css">
</head>

<body>
  
    <!-- 新增动画图层 -->
    <div id="animation-layer">
        <!-- 修改容器，使用新样式 -->
           <div class="time-container">
                    <!-- 时间显示内容 -->
                      <div class="nav-top-time">
        <!-- 修改显示时间的部分，添加显示秒的位置 -->
        <span id="date">2022年11月30日</span>
        <span id="time">星期五&nbsp;15:34:00</span>
      </div>
                </div>
           
<div style="position: relative;right: 40vh; top:40vh">
      <div class="cicle3"></div>
    </div>


<div style="position: relative;right: -40vh; top:40vh">
      <div class="cicle3"></div>
    </div>


        <div id="animations" style="margin-top: 20%;">
          <div class="animation animation1">
              <div class="animate1"></div>
              <div class="animate2"></div>
              <div class="animate3"></div>
          </div>
      </div>
       <div id="animations" style="margin-top: 0%;margin-left: 10%;">
          <div class="animation animation1">
              <div class="animate1"></div>
              <div class="animate2"></div>
              <div class="animate3"></div>
          </div>
      </div>
       <div id="animations" style="margin-top: 35%;margin-left: 80%;">
          <div class="animation animation1">
              <div class="animate1"></div>
              <div class="animate2"></div>
              <div class="animate3"></div>
          </div>
      </div>
 
    </div>
    <!-- 新增容器 -->
    <div class="overlay-container">
        <!-- 新增标题容器 -->
        <div class="title-container">
         
             <p class="title">文山州智慧民政</p>
        </div>
        <!-- 新增下方容器 -->
        <div class="below-title-container">
            <div class="small-container gradient-orange">
                <div class="small-container-child child-img-1"></div>
                <!-- 新增文字容器 -->
                <div class="text-container">视频互联</div>
            </div>
            <div class="small-container gradient-green">
                <div class="small-container-child child-img-2"></div>
                <!-- 新增文字容器 -->
                <div class="text-container">金民工程</div>
            </div>
            <div class="small-container gradient-purple">
                <div class="small-container-child child-img-3"></div>
                <!-- 新增文字容器 -->
                 <div class="text-container">智慧养老</div>
              
            </div>
            <div class="small-container gradient-red">
                <div class="small-container-child child-img-4"></div>
                <!-- 新增文字容器 -->
                <div class="text-container">儿童之家</div>
            </div>
            <div class="small-container gradient-cyan">
                <div class="small-container-child child-img-5"></div>
                <!-- 新增文字容器 -->
                <div class="text-container">社会救助</div>
            </div>
        </div>
        <div class="below-title-container2">
             <div class="small-container2 ">
                <div class="title-in-small2">民政一张图</div>
                <div class="image-in-small2" style="background-image: url('文山.png'); background-size: contain; background-position: center; background-repeat: no-repeat;"></div>
            </div>
            <div class="small-container2 ">
                 <div class="title-in-small2">养老机构管理</div>
                <div class="image-in-small2" style="background-image: url('智能.png'); background-size: contain; background-position: center; background-repeat: no-repeat;"></div>
            </div>
        </div>
    </div>
    <!-- 移除原有的动画样式代码 -->
</body>
<script>
    // 定义 getTime 函数，添加获取秒数的逻辑
    function getTime() {
        const now = new Date();
        const year = now.getFullYear();
        const month = String(now.getMonth() + 1).padStart(2, '0');
        const day = String(now.getDate()).padStart(2, '0');
        const weekDays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
        const weekDay = weekDays[now.getDay()];
        const hours = String(now.getHours()).padStart(2, '0');
        const minutes = String(now.getMinutes()).padStart(2, '0');
        // 获取秒数并补零
        const seconds = String(now.getSeconds()).padStart(2, '0'); 

        const date = `${year}年${month}月${day}日`;
        const time = `${weekDay}`;
        // 拼接包含秒数的时间
        const timeWithMinutes = `${hours}:${minutes}:${seconds}`; 

        return [date, time, timeWithMinutes];
    }

    // 时间
    var timer = null;
    function setTime() {
        if (timer !== null) {
            clearTimeout(timer);
        }
        setTimeout(function () {
            $("#date").text(getTime()[0]);
            $("#time").text(getTime()[1] + "  " + getTime()[2]);
            setTime();
        }, 1000);
    }
    setTime();
</script>
</html>